<template>
    <view class="content">
        <view class="main">
            <view v-for="(item,index) in state.list" :key="index">
                <view class="title">{{ item.name }}</view>
                <view style="display: flex;flex-wrap: wrap;">
                    <view class="u-page__tag-item" v-for="(item, i) in item.skillItem" :key="i">
                        <up-tag :text="item.label" :plain="!item.checked" plainFill :name="i"
                            @click="checkboxClick(index,$event)">
                        </up-tag>
                    </view>
                </view>
            </view>
        </view>
        <view class="fixed-action-wrap">
            <view class="fixed-action-wrap-button" @click="save">保存</view>
        </view>
    </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from "vue"

const { proxy } = getCurrentInstance()

const state = reactive({
    list: [],
    checkboxValue: []
})

const checkboxClick = (index, name) => {
    console.log(index, name)
    state.list[index].skillItem[name].checked = !state.list[index].skillItem[name].checked
    // checkboxs[name].checked = !checkboxs[name].checked;
    console.log(state.list)
};
function getCheckedItems(arr) {
    let result = [];
  for (let item of arr) {
    let checkedItems = item.skillItem.filter(subItem => subItem.checked === true);
    result = result.concat(checkedItems);
  }
  return result;
}


function save(){
    const list=getCheckedItems(state.list)
    // console.log(list)
    proxy.emit('on-skill-select',list);
    uni.navigateBack()
}

async function getList() {
    const res = await proxy.request('/skill/getlist', {}, {
        method: 'GET'
    })
    state.list = res.data.data.map((item) => {
        const { skillItem, ...info } = item
        return {
            ...info,
            skillItem: skillItem.map(iitem => {
                return {
                    ...iitem,
                    checked: false
                }
            })
        }
    })
}

onMounted(() => {
    getList()
})

</script>

<style lang="scss">
page {
    padding: 32rpx;
}
</style>

<style lang="scss" scoped>
.title {
    padding: 24rpx 0;
}

.u-page__tag-item {
    margin-right: 20rpx;
    margin-bottom: 20rpx;
}
.main{
    padding-bottom: 200rpx;
}

.fixed-action-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 128rpx;
    padding: 32rpx;
    background-color: #FFFFFF;
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
    z-index: 99;

    &-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(100% - 24px);
        height: 80rpx;
        background: #F2CB51;
        border-radius: 58rpx 58rpx 58rpx 58rpx;
    }
}
</style>